import React, { useEffect, useState } from 'react'
import style from './personInfo.module.scss'
import { IEmployee, IProjectManager } from '../../../starter/model/interfaces'
import ItemCard from '../ItemCard/ItemCard'
import dayjs, { Dayjs } from 'dayjs'
import { DATE_FORMAT, SEX } from '../../../starter/constants'
import TextArea from 'antd/es/input/TextArea'
import { Button } from 'antd'
import { CheckOutlined, CloseOutlined } from '@ant-design/icons'
import PersonContactSet from '../PersonContactSet/PersonContactSet'

type TPersonInfo = {
  person: IEmployee | IProjectManager
  onUpdate: (person: IEmployee | IProjectManager) => void
}
const PersonInfo = ({person, onUpdate}: TPersonInfo) => {
  const [showInfo, setShowInfo] = useState(false)
  const [isEdit, setIsEdit] = useState(false)
  const [tmpPerson, setTmpPerson] = useState<IEmployee | IProjectManager>(person)

  useEffect(() => {
    window.addEventListener('click', closeInfo)
    return () => {
      window.removeEventListener('click', closeInfo)
    }
  })

  const closeInfo = () => {
    setShowInfo(false)
  }

  useEffect(() => {
    if (JSON.stringify(person) !== JSON.stringify(tmpPerson)) {
      setIsEdit(true)
    } else {
      setIsEdit(false)
    }
  }, [tmpPerson])

  useEffect(() => {
    setTmpPerson({...person})
  }, [person])
  const handleInputChange = (name: string, value: string): void => {
    setTmpPerson({
      ...tmpPerson,
      [name]: value,
    })
  }
  const handleInputChangeDate = (name: string, date: Dayjs, dateString?: string | string[]): void => {
    setTmpPerson({
      ...tmpPerson,
      [name]: date.toDate(),
    })
  }
  return (
    <div className={style.wrapper}
      onClick={(e) => {
        e.stopPropagation()
        setShowInfo(!showInfo)
      }}
    >
      <div>{`${person.firstName} ${person.lastName}`}</div>
      <PersonContactSet person={person}/>
      { showInfo &&
        <div className={style.info}
             onClick={(e) => e.stopPropagation()}
        >
          <ItemCard label={'Имя:'} value={tmpPerson.firstName} type={'text'} onChange={ (e) => handleInputChange('firstName', e.target.value)}/>
          <ItemCard label={'Фамилия:'} value={tmpPerson.lastName} type={'text'} onChange={ (e) => handleInputChange('lastName', e.target.value)}/>
          <ItemCard label={'Отчество:'} value={tmpPerson.middleName || ''} type={'text'} onChange={ (e) => handleInputChange('middleName', e.target.value)}/>
          <ItemCard label={'День рождения:'} value={dayjs(tmpPerson.birthDay).format(DATE_FORMAT)} type={'date'} onChange={ (date) => handleInputChangeDate('birthDay', date )}/>
          <ItemCard label={'Пол:'} value={tmpPerson.sex === 'male' ? SEX.male : SEX.female} type={'sex'} onChange={ (e) => handleInputChange('sex', e.target.value)}/>
          <ItemCard label={'email:'} value={tmpPerson.email} type={'text'} onChange={ (e) => handleInputChange('email', e.target.value)}/>
          <ItemCard label={'phone:'} value={tmpPerson.phone} type={'text'} onChange={ (e) => handleInputChange('phone', e.target.value)}/>
          <ItemCard label={'telegram:'} value={tmpPerson.telegram} type={'text'} onChange={ (e) => handleInputChange('telegram', e.target.value)}/>
          <span>Комментарий:</span>
          <TextArea rows={4} value={ tmpPerson.comment}
                    name="comment"
                    onChange={(e) => {handleInputChange('comment', e.target.value)}}
          />
          {/*<PersonContactSet person={tmpPerson}/>*/}
          { isEdit &&
            <div className={style.buttonSet}>
              <Button style={{borderColor: 'green', color: 'green'}}
                      onClick={() => {onUpdate(tmpPerson)}}
              >
                <CheckOutlined style={{color: 'green'}} className={style.approve}
                />
                Сохранить</Button>
              <Button danger
                      onClick={() => setTmpPerson({...person})}
              >
                <CloseOutlined style={{color: 'red'}} className={style.cancel}
                />
                Отменить</Button>
            </div>
          }
        </div>
      }
    </div>
  )
}

export default PersonInfo
